<!DOCTYPE html>
<html lang="en"  xmlns:sec="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <style>
        body {
            background-image: url('static/assets/img/back3.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 450px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: cadetblue;
            color: #fff;
            border: none;
            border-radius: 100px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }

        div.box{
            margin-left: 20cm;

        }
        div.ex1 {
            height:30px;
        }
        div.ex2 {
            height:30px;
        }
    </style>
</head>
<body>
<!--<div img src="../img/back2.jpg">-->
<!--    <div sec:authorize="isAuthenticated()">-->
<!--        <h2 align="center"><span sec:authentication="name" style="color: #007bff"></span>-->
<!--            您好，您的用户权限为<span sec:///authentication="principal.authorities"-->
<!--                                  ></span></h2>-->
<!--    </div>-->

    <div sec:authorize="hasRole('common' )">
        <div class="box">姓名：<span sec:authentication="name" style="color: #007bff" ></span>

            <div class="ex1"> 权限为:<span sec:authentication="principal.authorities"   style="color:darkkhaki"><span></div>
            <div class="ex1">你可以进行以下操作</div>
            <div class="ex1"> 评论文章</div>
            <div class="ex1"> 查看文章</div>
            <div class="ex1">修改用户名</div>
        </div>
    </div>

    <div sec:authorize="hasAuthority('ROLE_admin')">
            <div class="box">姓名：<span sec:authentication="name" style="color: #007bff"></span>
                <div class="ex2">权限为：<span sec:authentication="principal.authorities"   style="color:darkkhaki"><span></div>
                <div class="ex2">你可以进行以下操作</div>
                <div class="ex2"> 进入后台管理</div>
                <div class="ex2"> 发布文章</div>
                <div class="ex2"> 删除文章</div>
                <div class="ex2"> 编辑评论</div>
                <div class="ex2"> 删除评论</div>
            </div>
        </div>
    </div >
<div>

    <div align="center" class="container">
        <form th:action="@{/updateUser}" method="post">
            <i class="fa fa-angle-left"></i>
            <label>修改用户名：</label>
            <input type="text"  placeholder="请输入新的用户名" name="username"  oninput="limitInputLength(this)" required>
            <button type="submit">确认修改</button>
            <p><a th:href="@{/deleteUser}">注销当前用户</a></p>

            <br>
            <a class="green-btn btn btn-purple waves-effect waves-light" href="/"><i class="fa fa-angle-left" ></i> 返回</a>
        </form>
</div>
</div>
</body>
<script>
    function limitInputLength(input) {
        var maxLength = 7; // 限制为7个字符
        if (input.value.length > maxLength) {
            // 如果用户输入超过5个字符，弹出警告
            alert("警告：输入的字符数量已达到7位！ ");
            // 截断输入框的值
            input.value = input.value.slice(0, maxLength);
        }
    }
</script>
</html>